<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
	</head>
	<body>
		间歇调用和超时调用
		<p>javaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行
		前者指定的时间过后执行代码，后者则是每隔指定的时间就执行一次代码。</p>
	
	<div id="a"></div>
	</body>
	
	<script>
		//超时调用需要使用window对象的setTimeout()方法，接受两个参数：
		//需要执行的代码和毫秒数的超时时间
		
		//这种写法不推荐，容易出错，不好扩展
		//setTimeout("alert('tom')",2000);
		
		
	/*	//比较好的 
		function box(){
			alert('lee');
		}
		setTimeout(box,2000);//2秒后执行函数box*/
		
		//推荐（扩展性和分装性）
	var boxTime =	setTimeout(function(){  //返回值是超时调用的id
			alert('jok');
		},2000);
	//	alert(boxTime);
		clearTimeout(boxTime);//取消超时调用的方法
		
		//间歇调用使用clearInterval()方法：
		//但是取消间歇调用的重要性远远高于取消超时调用，因为在不加干涉的情况下，间歇调用会一直执行到页面关闭为止
		
		var boxTimes =setInterval(function(){
			alert('一直执行');
		},2000);
		clearInterval(boxTimes);//取消
		
		
	/*	//间歇调用定时器
		var num =0;
		var max =5;
	var id=	setInterval(function(){
			num++;
			document.getElementById('a').innerHTML +=num;
			if(num ==max){
				clearInterval(id);
				alert('定时器执行完毕');
			}
		},1000);*/
		//ps 实际在开发环境很少使用真正的间歇调用，因为需要根据情况来取消id
		//并且肯能造成同步问题，不建议使用间歇调用，而去使用超时调用。
		
		
		//最佳方式使用超时调用模拟间歇调用
		var num =0;
		var max =5;
function timeoutBox (){
	num++;
	document.getElementById('a').innerHTML +=num;
	if(num==max){
		alert('执行完毕');
	}else{
		setTimeout(timeoutBox,1000);
	}
}
setTimeout(timeoutBox,1000);


  //location对象
  
  
  

	</script>
</html>
